<!DOCTYPE html>
<html lang="zh">

<head>
  <title></title>
  <meta charset="UTF-8">
  <!-- ------------------卢 -->
  <meta content="yes" name="apple-mobile-web-app-capable" />  
  <meta name="viewport" content="width=device-width, initial-scale=1.0,height=device-height,maximum-scale=1.0,user-scalable=no">
  <!-- ------------------------------ -->
  <link rel="stylesheet" href="../res/css/weui.css" />
  <link rel="stylesheet" href="../res/css/weuix.css" />
  <link rel="stylesheet" href="../res/css/common.css">
  <script src="../res/js/zepto.min.js"></script>
  <script src="../res/js/zepto.weui.js"></script>
  <script src="../res/js/common.js?v=2"></script>
  <script src="../res/js/picker.city.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
	var length = 0,
		userId = getQst('user_id'),
		dataList,
		setMod = 'creat',	//创建或者编辑地址
		editId;
    // function getuseraddress() {
	// 	paramJson = { "actName": "GetUserAddress", "user_id": userid, "rand": Math.random(),"uid": userid,"utype": 1 };
	// 	ajaxGet("/nethospnew/service/nethosp_action.ashx", paramJson, getStateOk);
    // }
    function getuseraddress() {
		let params = {
			"current": 1,
  			"size": 20
		}
		newAjaxPost("/h5/receivingAddress/getReceivingAddress", params, getStateOk);
    }
	function getStateOk(res){
		var $biglist = $(".biglist");
		var ListTmpl=''
		dataList = res.data.list;
		$biglist.html('')

		dataList.forEach( item => {
			ListTmpl = `
				<div href="javascript:" class="address-item" >
					<div class="address-msg">
						<div class="">
							<div>
								<span class="address-user">${item.userName}</span>
								<span class="address-phone">${item.userPhone}</span>
								${item.addressDeft == '1' ? '<span class="default-tag">默认</span>' : ''}
							</div>
							<p class="address-detail">
								${item.address} ${item.addressDetl}
							</p>
						</div>
					</div>
					<div class="btn-box">
						<div class="delet-btn" onclick="deleteAddress(${item.id})">删除</div>
						<div class="edit-btn"><p onclick="dothis(${item.id})">编辑</p></div>
					</div>
				</div>
			`
			$biglist.append(ListTmpl)
		})
	}
	
	//添加地址数量
	function save_address() {
	    str_name = $("#txt_name").val();  //收货人
	    str_tel = $("#txt_tel").val();   //电话
	    str_city = $("#txt_city").val();  //城市地址
	    str_xxdz = $("#txt_xxdz").val();  //详细地址
	    str_default = $("#switchCP").is(':checked') ? '1' : '0';   //是否默认
	    var myreg = /^[1][3-9]\d{9}$/;
		//查看地址数量
		if(length>=20){
			msgInfo("你的地址数量已达上限");
			return;
		}
	    if (str_name=='') {
	        msgInfo("请填写收货人姓名");
	        return;
	    }
	    if (str_tel=='') {
	        msgInfo("请填写收货人号码");
	        return;
	    }
	    if (!myreg.test(str_tel)) {
	        msgInfo("请填写正确的手机号码");
	        return;
	    }
	    if (str_city=='') {
	        msgInfo("请填写收货地址");
	        return;
	    }
	    if (str_xxdz=='') {
	        msgInfo("请填写收货详细地址");
	        return;
	    }
	    
		params = { 
			"userId": userId,
			"userName":str_name,
			"userPhone":str_tel,
			"address":str_city,
			"addressDetl":str_xxdz,
			// "lableName":1,
			"addressDeft":str_default,
		};
		if(setMod == 'creat'){
			newAjaxPost("/h5/receivingAddress/addReceivingAddress", params, DoUserAddressOk);
		}else if(setMod == 'edit'){
			params.id = editId
			newAjaxPost("/h5/receivingAddress/updateReceivingAddress", params, DoUserAddressOk);
		}
	}
	function DoUserAddressOk(res){
		if(res.code==1){
			msgInfo("保存成功！");
			$.closePopup() //关闭
			getuseraddress()
		}else{
			msgInfo(res.msg);
		}
	}
	
	//操作地址
	function dothis(id){
		console.log(id)
		$.modal({
			title: "",
			text: "请问要对该地址操作什么吗？",
			buttons: [
				{ text: "设为默认", onClick: function(){ 
					let params = { "userId": userId, "id": id, "addressDeft": '1' };
					newAjaxPost("/h5/receivingAddress/updateReceivingAddress", params, DoAddressDefaultOk);
				} },
				{ text: "修改", onClick: function(){ 
					editAddress(id)
				} },
				{ text: "取消", className: "default", onClick: function(){ } },
			]
		});
	}

	function deleteAddress(id){
		$.modal({
			title: "",
			text: "确定删除该地址吗",
			buttons: [
				{ 
					text: "确定", 
					onClick: function(){
						let params = { "id": id };
						newAjaxPost("/h5/receivingAddress/delReceivingAddress", params, getuseraddress);
					}
				},
				{ text: "取消", className: "default", onClick: function(){} }
			]
		})
	}

	function editAddress(id) {
		let obj = dataList.find(item => item.id == id) || {}

		$('#divRecord').popup()
		$("#txt_name").val(obj.userName);  //收货人
		$("#txt_tel").val(obj.userPhone);   //电话
		$("#txt_city").val(obj.address);  //城市地址
		$("#txt_xxdz").val(obj.addressDetl);  //详细地址
		$("#switchCP").prop('checked',obj.addressDeft == '1')   //是否默认

		if(id){
			setMod = 'edit'
			editId = id
			$("#commitAddress").text('保存更改')
		}else{
			setMod = 'creat'
			editId = 0
			$("#commitAddress").text('提交新地址')
		}
	}

    $(function () {
		userid = getQst("user_id");
		strOpenId = getQst("openid");
		getuseraddress()
		
		// 后退    
		$('#btnBack').on('click', function () {
			goPageNo(-1);
		})
		$('#change_save').on("click", function () {
			// $('#divRecord').popup() //打开
			editAddress(0)
		});
		
		///选择收货地址
		$("#txt_city").cityPicker({
		    title: "请选择收货地址",
		    onChange: function (picker, values, displayValues) {
		
		    }
		});

		$('#region').on('click',function(){
			$('#txt_name').blur();
			$('#txt_tel').blur();
			$('#txt_xxdz').blur();
		})
    })

  </script>
</head>
<style type="text/css">
	.weui-btn_primary:not(.weui-btn_disabled):active {
	    color: rgba(255, 255, 255, 0.6);
	    background-color: #1189ff;
	}
	.weui-input{ font-size:14px;}
	label{ font-size:14px;}     
	input{
	    text-align:left;
	}  
	.lable_div{
	    height:20px;
	    border:1px solid #b7b2b2;
	    border-radius:5px;
	    text-align:center;
	    line-height:20px;
	    font-size:10px;
	    margin:5px;
	}
	table td{
	    border:none;
	} 
	/* .list{	background-color: white;	padding: 5px;}
	.list .weui-media-box__hd{margin-right: 0px;}
	.list .weui-media-box__hd .weui-media-box__thumb{padding: 10px;height: 40px;width: 40px;}
	.list .weui-media-box__bd{padding: 5px}
	.list .weui-media-box__bd .weui-media-box__title{line-height: 20px;margin-bottom: 5px;}
	.list .weui-media-box__bd .weui-media-box__title span{font-size: 15px;margin-left: 5px;color: #999999;}
	.list .weui-media-box__bd .weui-media-box__desc{line-height: 18px;}
	.list .weui-media-box__bd .weui-media-box__desc span{margin-right: 3px;padding:1px 5px;color:white;background-color: #1189ff;    border-radius: 5px;}
	.list .weui-media-box__fd{padding: 5px;border-left: 1px solid #cccccc;color: #999999;}
	.weui-cell{margin: 10px 15px; padding: 0;}
	.weui-popup__modal .weui-cell{height: 32px;}
	.weui-popup__modal .weui-cell__hd{padding-left: 8px;}
	.weui-popup__modal {height: 70%;}
	.weui-btn{border-radius: 10px;color: #ffffff;background: #1189ff;}
	.weui-btn:after {content: none;}
	.weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box {border-color: #1189ff;background-color: #1189ff;} */
 
	.fixed-top{
		position: sticky;
		top: 0;
	}
	.address-item{
		padding: 9px 15px 15px;
		background: white;
		margin: 10px;
		border-radius: 8px;
	}
	.address-user{
		font-size: 16px;
		font-weight: bold;
	}
	.address-phone{
		font-size: 14px;
	}
	.default-tag{
		margin-left: 10px;
		padding: 2px 6px;
		font-size: 10px;
		background-color: rgb(230, 247, 254);
		color: #1189ff;
		border-radius: 6px;
	}
	.btn-box{
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
		border-top: 1px solid #aaa;
		padding-top: 10px;
	}
	.delet-btn, .edit-btn{
		padding: 2px 20px;
		color: #fff;
		border-radius: 8px;
	}
	.delet-btn{
		background-color: rgb(248, 90, 90);
	}
	.edit-btn{
		margin-left: 10px;
		background-color: #1189ff;
	}
  </style>
<body ontouchstart style="background: #f1f3f4;">
	<div class="fixed-top">
		<div class="weui-header" style="background-color: #FFFFFF;">
			<div class="weui-header-left"><a id="btnBack" class="icon icon-109"></a></div>
			<h1 class="weui-header-title">我的收货地址</h1>
		</div>
	</div>
	<section class="biglist">
		<!-- <a href="javascript:" class="weui-media-box weui-media-box_appmsg list" >
			<div class="weui-media-box__hd">
				<img class="weui-media-box__thumb" src="../res/images/dizhi_icon.png" alt="">
			</div>
			<div class="weui-media-box__bd">
				<h4 class="weui-media-box__title">收件人名字<span>电话</span></h4>
				<p class="weui-media-box__desc"><span>默认</span>地址地址地址地址地址地址地址地址地址地址</p>
			</div>
			<div class="weui-media-box__fd">
				<p>编辑</p>
			</div>
		</a> -->
		
		
	</section>
	<a style="margin:20px;" href="javascript:;" class="weui-btn weui-btn_primary" id="change_save">添加新地址</a>
	
	<!-- 添加地址 -->
	<div id="divRecord" class='weui-popup__container' style="height: 60%;">
	    <div class="weui-popup__overlay"></div>
	    <div class="weui-popup__modal">
	        <div class="weui-cells weui-cells_form" style="overflow:auto">	
				<div class="weui-cell">
				    <div class="weui-cell__hd">
				        <label class="weui-label" style="width:70px;">收货人</label>
				    </div>
				    <div class="weui-cell__bd">
				        <input class="weui-input" id="txt_name" placeholder="请输入收货人姓名" type="text">
				    </div>
				</div>
				<div class="weui-cell" >
				    <div class="weui-cell__hd">
				        <label class="weui-label" style="width:70px;">手机号码</label>
				    </div>
				    <div class="weui-cell__bd">
				        <input class="weui-input" id="txt_tel" placeholder="请输入收货人手机号码" type="tel">
				    </div>
				</div>
				<div class="weui-cell">
				    <div class="weui-cell__hd" style="width:70px;"><label class="weui-label">所在地区</label>
				    </div>

				    <div class="weui-cells weui-cells_form" id="region"  style="margin-top:0px;    width: 100%;">
				        <div class="weui-cell" style="padding:0px;">
				            <div class="weui-cell__bd">
								<input type='text' class="weui-input" id='txt_city' value="广东省 广州市 荔湾区" placeholder='请选择省市区县' />
				                <!-- <input class="weui-input" id="txt_city" type="city-picker"> -->
				            </div>
				        </div>
				    </div>
				    <!--<input class="weui-input" id="txt_szdq" placeholder="请输入省（市）、市（区）、县（区）" value="" type="text">-->
				</div>
				<div class="weui-cell">
				    <div class="weui-cell__hd" style="width:70px;"><label class="weui-label">详细地址</label></div>
				    <div class="weui-cell__bd">
				        <input class="weui-input" id="txt_xxdz" placeholder="如：道路、门牌号、小区、楼栋号、单元室等" value="" type="text">
				    </div>
				</div> 
				<div class="weui-cell weui-cell_switch">
				    <div class="weui-cell__hd"><label class="weui-label">设为默认地址</label></div>
				    <div class="weui-cell__ft">
				        <label for="switchCP" class="weui-switch-cp">
				            <input id="switchCP" class="weui-switch-cp__input" type="checkbox">
				            <div class="weui-switch-cp__box"></div>
				        </label>
				    </div>
				</div>
				<a style="margin:20px;" href="javascript:;" class="weui-btn weui-btn_primary" id="commitAddress" onclick="save_address()">提交新地址</a>
	        </div>
	    </div>
	</div>
	
</body>

</html>